<template>
  <div class="aa">
    <el-row>
      <el-col :span="2">
        <el-radio-group v-model="type" size="medium">
          <el-radio-button
            v-for="(item, index) in typeOption"
            :key="index"
            :label="item.value"
            @click.native="radioClick(item.value)"
            >{{ item.label }}
          </el-radio-button>
        </el-radio-group>
        <el-button type="primary" size="mini" icon="el-icon-search"
          >清空</el-button
        ><el-button type="primary" size="mini" icon="el-icon-search"
          >撤消</el-button
        ><el-button type="primary" size="mini" icon="el-icon-search"
          >恢复</el-button
        >
      </el-col>
      <el-col :span="20">
        <div id="videobox" class="cc" style="width:400px,height:200px">
          <video id="myvideo" autoplay width="400px" height="300px"></video>

          <div id="canvasbaox" class="bb">
            <canvas
              ref="tagcanvas"
              @mousedown="mouseDown($event)"
              @mouseup="mouseUp($event)"
              @mousemove="mouseMove($event)"
              @contextmenu.prevent="contextMenu($event)"
            ></canvas>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import flvjs from "flv.js";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
        typeOption: [
        { label: "线", value: "L" },
        { label: "矩形", value: "R" },
        { label: "箭头", value: "A" },
        { label: "文字", value: "T" },
      ],

      width: "300px",
      height: "200px",
      player: null,
      timer: null, // 重复绘制对象

      //线段的点的集合
      points: [],
      //可拖动圆圈的点的集合
      circles: [],

      isDragging: false,

      ctx: "",
      x: 0,
      y: 0,
      radius: 5,
      color: "blue",
      isSelected: false,

      index: 0,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    mouseDown(e) {
      debugger;
      let dom = this.$refs.tagcanvas;
      let boxv = document.querySelector("#videobox");

      //dom.offsetLeft dom.offsetTop ==0
      //ffsetLeft: 230  offsetTop: 103

      // e
      //clientX: 384
      //clientY: 194
      // layerX: 154
      // layerY: 91
      // ovementX: 0
      // movementY: 0
      // offsetX: 155
      // offsetY: 92
      // pageX: 384
      // pageY: 194
      // screenX: 422
      // screenY: 296
      // x: 384
      // y: 194
      // var clickX = e.pageX - dom.offsetLeft;
      // var clickY = e.pageY - dom.offsetTop;
      //   var clickX = e.offsetX - dom.offsetLeft;
      //   var clickY = e.offsetY - dom.offsetTop;
      //   var clickX = e.pageX - boxv.offsetLeft;
      //   var clickY = e.pageY - boxv.offsetTop;

      //偏右偏下
      var clickX = e.offsetX;
      var clickY = e.offsetY;

      console.log(clickX);
      console.log(clickY);

      if (e.button == 2) {
        // if (this.tagObj.index >= 0) {
        //   this.tagObj.isRightClick = true;
        // }
        return;
      }

      //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
      for (var i = 1; i < this.circles.length; i++) {
        var circle = this.circles[i];
        //使用勾股定理计算这个点与圆心之间的距离
        var distanceFromCenter = Math.sqrt(
          Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)
        );

        // 如果是其他的点，则设置可以拖动
        if (distanceFromCenter <= circle.radius) {
          // 清除之前选择的圆圈
          this.index = i;
          this.isDragging = true;
          //停止搜索
          return;
        }
      }
      //如果点击新的位置，则进入下面的代码，绘制点
      this.ctx.clearRect(0, 0, dom.width, dom.height);
      //遍历数组画圆
      var circle = new this.Circle(clickX, clickY);
      this.circles.push(circle);
      this.circles[0].color = "green";
      for (var i = 0; i < this.circles.length; i++) {
        var circle = this.circles[i];
        // 绘制圆圈
        this.ctx.globalAlpha = 0.85;
        this.ctx.beginPath();
        this.ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
        this.ctx.fillStyle = circle.color;
        this.ctx.strokeStyle = "black";
        this.ctx.fill();
        this.ctx.stroke();
      }
      // 画线
      var point = this.Point(clickX, clickY);
      this.points.push(point);
      this.ctx.beginPath();
      this.ctx.lineWidth = 4;
      //从起始点开始绘制
      this.ctx.moveTo(this.points[0].x, this.points[0].y);
      for (var i = 0; i < this.points.length; i++) {
        this.ctx.lineTo(this.points[i].x, this.points[i].y);
      }
      this.ctx.fillStyle = "rgb(2,100,30)";
      this.ctx.fill();
      this.ctx.strokeStyle = "#9d4dca";
      this.ctx.stroke();
    },
    mouseUp(e) {
      this.isDragging = false;
    },
    mouseMove(e) {
      let dom = this.$refs.tagcanvas;

      // 判断圆圈是否开始拖拽
      if (this.isDragging == true) {
        // 判断拖拽对象是否存在
        // 取得鼠标位置
        var x1 = e.offsetX - dom.offsetLeft;
        var y1 = e.offsetY - dom.offsetTop;
        this.ctx.clearRect(0, 0, dom.width, dom.height);
        //根据上文得到的index设置index点位置随鼠标改变
        this.circles[this.index].x = x1;
        this.circles[this.index].y = y1;
        this.points[this.index].x = x1;
        this.points[this.index].y = y1;
        for (var i = 0; i < this.circles.length; i++) {
          var circle = this.circles[i];
          // 绘制圆圈
          this.ctx.globalAlpha = 0.85;
          this.ctx.beginPath();
          this.ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
          this.ctx.fillStyle = circle.color;
          this.ctx.strokeStyle = "black";
          this.ctx.fill();
          this.ctx.stroke();
        }
        this.ctx.beginPath();
        this.ctx.moveTo(this.points[0].x, this.points[0].y);
        for (var i = 0; i < this.points.length; i++) {
          this.ctx.lineTo(this.points[i].x, this.points[i].y);
        }
        this.ctx.lineTo(this.points[0].x, this.points[0].y);
        // context.fillStyle="#831f68";
        this.ctx.fillStyle = "rgb(2,100,30)";
        this.ctx.fill();
        this.ctx.strokeStyle = "#9d4dca";
        this.ctx.stroke();
      }
    },
    contextMenu(e) {
      window.console.log(e);
      return false;
    },

    Point(x, y) {
      return {
        x: x,
        y: y,
      };
    },
    Circle(x, y) {
      return {
        x: x,
        y: y,
        radius: "2",
        color: "blue",
        isSelected: false,
      };
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (flvjs.isSupported()) {
      this.player = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        cors: true,
        url: "http://d.ossrs.net/live/livestream.flv",
      });
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    var video = document.querySelector("#myvideo");
    this.player.attachMediaElement(video);
    this.player.load();
    // this.player.play();

    console.log(video.offsetLeft);
    console.log(video.offsetTop);
    console.log(video.offsetWidth);
    console.log(video.offsetHeight);

    let vanvasbox = document.querySelector("#canvasbaox");

    vanvasbox.style.left = video.offsetLeft;
    vanvasbox.style.top = video.offsetTop;
    vanvasbox.style.width = video.offsetWidth + "px";
    vanvasbox.style.height = video.offsetHeight + "px";

    let dom = this.$refs.tagcanvas;
    dom.width = video.offsetWidth;
    dom.height = video.offsetHeight;

    // debugger;

    this.ctx = this.$refs.tagcanvas.getContext("2d");
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.bb {
  position: absolute;
  /* top: 0%;
    left: 0%;
    width: 100%;
    height: 100%; */
  background-color: transparent;
  z-index: 1001;
  -moz-opacity: 0.7;
  opacity: 0.7;
  filter: alpha(opacity=10);
}
.cc {
  position: relative;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
